// 设定不同屏幕宽度对应的CSS文件
var cssFiles = {
    small: "small-screen.css",
    medium: "medium-screen.css",
    large: "large-screen.css"
};

// 定义屏幕尺寸的阈值
var breakpoints = {
    small: 600,
    medium: 960,
    large: Infinity
};

function loadScreenSpecificCSS() {
    var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

    // 遍历断点，找到匹配的CSS文件
    for (var breakpoint in breakpoints) {
        if (screenWidth <= breakpoints[breakpoint]) {
            var cssFile = cssFiles[breakpoint];
            if (cssFile) {
                var link = document.createElement("link");
                link.rel = "stylesheet";
                link.type = "text/css";
                link.href = cssFile;
                document.head.appendChild(link);
                console.log("Loaded CSS: ", cssFile);
                break;
            }
        }
    }
}

// 页面加载时立即加载一次
loadScreenSpecificCSS();

// 窗口大小变化时重新加载对应的CSS
window.addEventListener("resize", function() {
    // 移除之前加载的特定屏幕尺寸的CSS，避免重复加载
    Array.from(document.querySelectorAll('link[rel="stylesheet"]')).forEach(link => {
        if (link.href.includes('small-screen') || link.href.includes('medium-screen') || link.href.includes('large-screen')) {
            link.remove();
        }
    });
    loadScreenSpecificCSS();
});